<template>
  <div id="home-slide-management">
    <h4>首页幻灯管理</h4>
    <div class="content">
      <p>备注：图片更换后自动生效</p>
      <div>
        <span>第一张：</span>
        <el-image :src="src"></el-image>
        <div>
          <el-link type="primary">更换</el-link>
          <el-link type="info">删除</el-link>
        </div>
      </div>
      <div>
        <span>第二张：</span>
        <el-image :src="src"></el-image>
        <div>
          <el-link type="primary">更换</el-link>
          <el-link type="info">删除</el-link>
        </div>
      </div>
      <div>
        <span>第三张：</span>
        <div class="add" @click="centerDialogVisible = true">
          <i class="el-icon-plus"></i>
        </div>
      </div>
    </div>
    <el-dialog
      title="添加幻灯片"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        list-type="picture-card"
        ref="upload"
        :auto-upload="false"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl"/>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      centerDialogVisible: false,
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    submitUpload() {
        this.$refs.upload.submit();
        this.centerDialogVisible = false
    },
  },
};
</script>

<style lang="less" scoped>
#home-slide-management > h4 {
  margin-bottom: 30px;
}
.content {
  width: 363px;
  padding: 40px 0 40px 50px;
  background: #eee;
  display: flex;
  flex-direction: column;
  & > p {
    font-size: 14px;
    color: #333;
    padding: 0 82px 20px 0;
    text-align: center;
  }
  & > div {
    height: 92px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    & > .el-image {
      width: 141px;
      height: 92px;
      margin-right: 10px;
    }
    & > div {
      display: flex;
      flex-direction: column;
    }
    & > .add {
      width: 50px;
      height: 50px;
      background: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
      color: #fff;
      border-radius: 10px;
      cursor: pointer;
    }
  }
}
</style>
